<script setup lang="ts">
import closeBtn from "@/assets/icons/close-white.svg";
import { ref } from "vue";
import DeviceCategoryApi from "@/api/DeviceCategoryApi";
import { useLocalStore } from "@/views/layer/gismap/store";
interface Tree {
  label: string;
  children?: Tree[];
  id: number | string;
}

const emitEvents = defineEmits(["toggleShowLayerManager"]);
const dataRef = ref<Tree[]>([]);
const isShow = ref(true);
const typeList = ["管点", "管段", "区域" /*, "巡检路线", "人员轨迹", "隐患" */];
const activeTypeIndex = ref(0);
const localStore = useLocalStore();
const pointCheckedKeys = ref(["01"]);
const lineCheckedKeys = ref(["02"]);
const areaCheckedKeys = ref([3]);
const handleNodeClick = (_, { checkedKeys }: any) => {
  if (checkedKeys === undefined || checkedKeys === null) {
    return;
  }
  switch (activeTypeIndex.value) {
    case 0:
      pointCheckedKeys.value = checkedKeys;
      localStore.setVisiblePointClassIds(checkedKeys);
      break;
    case 1:
      lineCheckedKeys.value = checkedKeys;
      localStore.setVisibleLineClassIds(checkedKeys);
      break;
    case 2:
      areaCheckedKeys.value = checkedKeys.filter((item: any) =>
        Number.isFinite(item)
      );
      localStore.setVisibleAreaTypes(checkedKeys);
      break;
  }
};
const close = () => {
  isShow.value = !isShow.value;
  emitEvents("toggleShowLayerManager");
};

const defaultProps = {
  children: "children",
  label: "label",
};
const change = (value) => {};
const getPipeDataByType = (
  classId: string,
  api: string,
  typeId: string,
  typeLabel: string
) => {
  const params = {
    pageSize: 1000,
    pageIndex: 1,
    pClassId: classId,
  };
  DeviceCategoryApi[api](params).then(({ data, succeeded }: any) => {
    if (succeeded) {
      const children = data.items.map((item: any) => {
        const { className, classId } = item;
        return {
          id: classId,
          label: className,
        };
      });
      dataRef.value = [
        {
          id: typeId,
          label: typeLabel,
          children,
        },
      ];
    }
  });
};
watchEffect(() => {
  switch (activeTypeIndex.value) {
    case 0:
      getPipeDataByType("01", "api_query", "01", "管点");
      break;
    case 1:
      getPipeDataByType("02", "api_query", "02", "管段");
      break;
    default:
      dataRef.value = [
        {
          id: "03",
          label: "区域",
          // 巡检区域 2-DMA分区 0-其他区域
          children: [
            {
              id: 1,
              label: "巡检区域",
            },
            {
              id: 2,
              label: "DMA分区",
            },
            {
              id: 3,
              label: "其他区域",
            },
          ],
        },
      ];
  }
});
watchEffect(() => {
  if (localStore.visiblePointClassIds) {
    pointCheckedKeys.value = localStore.visiblePointClassIds
  }
  if (localStore.visibleLineClassIds) {
    lineCheckedKeys.value = localStore.visibleLineClassIds
  }
  if (localStore.visibleAreaTypes) {
    areaCheckedKeys.value = localStore.visibleAreaTypes
  }
})
</script>

<template>
  <div class="layer-manager">
    <div class="title">
      <span>图层列表</span>
      <img :src="closeBtn" alt="" class="close" @click="close" />
    </div>
    <div class="type">
      <span
        v-for="(type, index) in typeList"
        @click="() => (activeTypeIndex = index)"
        :class="{ select: index === activeTypeIndex }"
        :key="index"
        >{{ type }}</span
      >
    </div>
    <el-tree
      class="tree"
      node-key="id"
      show-checkbox
      :data="dataRef"
      :props="defaultProps"
      :default-expanded-keys="['01', '02', '03']"
      :default-checked-keys="
        [pointCheckedKeys, lineCheckedKeys, areaCheckedKeys][activeTypeIndex]
      "
      @node-click="handleNodeClick"
      @check="handleNodeClick"
    />
  </div>
</template>

<style scoped lang="scss">
.layer-manager {
  position: absolute;
  top: 80px;
  right: 17px;
  z-index: 1000;
  width: 340px;
  height: 574px;
  font-family: Roboto, sans-serif;
  font-size: 14px;
  line-height: 20px;
  color: rgb(16 16 16 / 100%);
  text-align: center;
  background-color: rgb(255 255 255 / 100%);
  border: 1px solid rgb(25 144 255 / 100%);
  border-radius: 3px;
}

.title {
  height: 35px;
  margin-bottom: 1rem;
  line-height: 35px;
  color: rgb(255 255 255 / 100%);
  text-align: center;
  background-color: rgb(25 144 255 / 100%);
  border: 1px solid rgb(255 255 255 / 100%);
  border-radius: 3px;

  .close {
    position: relative;
    top: 4px;
    right: 10px;
    float: right;
    cursor: pointer;
  }
}

.type {
  display: flex;
  align-items: center;
  justify-content: space-around;
  width: 307px;
  height: 50px;
  margin-left: 15px;

  span {
    line-height: 49px;
    cursor: pointer;
  }

  .select {
    border-bottom: 3px solid #1990ff;
  }
}

.tree {
  height: 447px;
  margin-left: 15px;
  overflow-y: auto;

  :deep(.is-current) {
    .el-tree-node__label {
      color: #32bebd;
    }
  }

  :deep(.el-tree-node__label) {
    cursor: initial;
  }
}
</style>
